<template>
  <div class="dfkdeail-container">
    <div class="header">
      <div>
        <div class="left" @click="goback">
          <i></i>
        </div>
      </div>
      <!-- <h4>大件会</h4> -->
      <div class="logo">
        订单详情
      </div>
    </div>
    <div class="confirm">
      <div class="fl">
                <i></i>
                <span>等待支付订金</span>
            </div>
            <div class="fr ">
                <div>需付款：¥
                    <span>89</span>
                </div>
                <div>剩余
                    <i>12</i> 小时
                    <i>50</i> 分钟</div>
            </div>
        </div>
        <div class="address ">
            <i class="fl "></i>
            <div class="addr ">
                <div>
                    钟煌
                    <span>13812348888</span>
                </div>
                <p>湖北省武汉市武昌区静安路六号尚文科技大厦5.5创意产业园A座24楼A湖北省武汉市武昌区静安路六号尚文科技大厦5.5创意产业园A座24楼A</p>
            </div>
        </div>
        <div class="tiaowen "></div>
        <div class="unPayed ">
            <div class="unPayed ">
                <div class="header ">
                    DJ 大件会
                </div>
                <div class="body ">
                    <div class="pro clearfix ">
                        <div class="fl ">
                            <img src="../../../assets/images/myOrder/shangpinru.png">
                        </div>
                        <div class="fr ">
                            <ul>
                                <li>2017年10月28日『武汉业主采购团』建材专场</li>
                                <li>冠珠瓷砖</li>
                            </ul>
                        </div>
                    </div>
                    <div class="header hasPayed ">
                        <div class="clearfix ">
                            <span class="fl ">商品订金：</span>
                            <span class="fr ">¥
                                <i>300</i>
                            </span>
                        </div>
                        有效期至：2018-02-01
                        <div class="line "></div>
                    </div>
                    <div class="header hasPayed total ">
                        总计
                        <i>300</i>
                        <div class="line "></div>
                    </div>
                </div>
            </div>

        </div>
        <div class="listInfo ">
            <div class="clearfix ">
                <span>订单编号：</span>
                <span>23234387548437</span>
            </div>
            <div class="clearfix ">
                <span>订单时间：</span>
                <span>2017-11-20 10:30:32</span>
            </div>
        </div>
        <div class="foot ">
            <mt-button size="normal " type="danger " @click="popupVisible=! popupVisible ">去支付</mt-button>
        </div>
        <mt-popup v-model="popupVisible " position="bottom ">
            <div class="popheader ">
                请在
                <i>29</i>：
                <i>34.9</i> 内支付
            </div>
            <div class="popbody ">
                <h4>选择支付方式</h4>
                <div class="wx clearfix ">
                    <div class="fl ">
                        <i></i>
                        <span>微信支付</span>
                    </div>
                    <i class="fr "></i>
                </div>
                <div class="wx clearfix zfb ">
                    <i></i>
                    <span>支付宝支付</span>
                    <i></i>

                </div>
            </div>
            <router-link to="/vip/order/successPay ">
            <div class="popfoot ">立即支付：¥
                <i>89</i>
            </div>
            </router-link>
        </mt-popup>
    </div>
</template>
<script>
  import { Popup } from "mint-ui";
  export default {
    data() {
      return {
        popupVisible: false,
        save: true
      };
    },
    methods: {
      goback() {
        this.$router.goBack();
      }
    }
  };
</script>
<style scoped lang="less">
.header {
  color: #000;
  background-color: #fff;
  .logo {
    a {
      display: inline-block;
      width: 131/37.5rem;
      height: 42/37.5rem;
      margin-top: 18/37.5rem;
    }
  }
  .left {
    position: absolute;
    left: 32/37.5rem;
    top: 35/37.5rem;
    height: 32/37.5rem;
    line-height: 32/37.5rem;
    a {
      font-size: 32/40rem;
    }
    i {
      display: inline-block;
      width: 22/37.5rem;
      height: 30/37.5rem;
      background: url(../../../assets/images/index/gengduo@2x.png) no-repeat;
      background-size: contain;
      transform: rotate(180deg);
    }
  }
}
.confirm {
  height: 120/37.5rem;
  line-height: 120/37.5rem;
  background-color: #e8393d;
  text-align: left;
  padding: 0 32/37.5rem;
  > div:first-child {
    height: 120/37.5rem;
    line-height: 120/37.5rem;
    position: relative;
    i {
      display: inline-block;
      width: 30/37.5rem;
      height: 30/37.5rem;
      background: url(../../../assets/images/index/clock2x.png) no-repeat;
      background-size: contain;
      position: absolute;
      top: 50%;
      margin-top: -15/37.5rem;
    }
    span {
      margin-left: 54/37.5rem;
    }
  }
  > div:last-child {
    line-height: 44/37.5rem;
    padding: 20/37.5rem 0;
    color: #fff;
    div:first-child {
      font-size: 28/37.5rem;
    }
    div:last-child {
      font-size: 24/37.5rem;
    }
  }
  span {
    font-size: 32/37.5rem;
    color: #fff;
  }
}
.address {
  text-align: left;
  padding: 39/37.5rem 32/37.5rem 27/37.5rem 32/37.5rem;
  font-size: 30/37.5rem;
  color: #333;
  background-color: #fff;
  i {
    display: inline-block;
    width: 26/37.5rem;
    height: 30/37.5rem;
    background: url(../../../assets/images/index/adr@2x.png) no-repeat;
    background-size: contain;
    margin-top: 56/37.5rem;
  }
  .addr {
    margin-left: 30px;
    span {
      margin-left: 59/37.5rem;
    }
    p {
      margin-top: 23/37.5rem;
      font-size: 26/37.5rem;
      color: #555;
      line-height: 34/37.5rem;
    }
  }
}

.tiaowen {
  height: 8/37.5rem;
  background: url(../../../assets/images/index/tiaowen.png);
  background-size: contain;
}

.unPayed {
  background-color: #fff;
  margin-top: 24/37.5rem;
  .header {
    padding: 0 31/37.5rem;
    box-sizing: border-box;
    border-bottom: 2px solid #eee;
    height: 80/37.5rem;
    line-height: 80/37.5rem;
    text-align: left;
    font-size: 26/37.5rem;
    color: #555;
    .fl {
      font-size: 24/37.5rem;
    }
    .fr {
      font-size: 26/37.5rem;
      color: #da1a1e;
    }
  }
  .body {
    padding-top: 18/37.5rem;
    padding: 0 31/37.5rem;
    text-align: right;
    .pro {
      .fl {
        width: 200/37.5rem;
        height: 200/37.5rem;
        margin-top: 13/37.5rem;
      }
      .fr {
        width: 451/37.5rem;
        text-align: left;
        li:nth-of-type(1) {
          font-size: 30/37.5rem;
          line-height: 56/37.5rem;
          color: #333;
        }
        li:nth-of-type(2) {
          font-size: 28/37.5rem;
          line-height: 56/37.5rem;
          color: #555;
        }
        li:nth-of-type(3) {
          font-size: 24/37.5rem;
          text-align: right;
          span {
            color: red;
            font-size: 26/37.5rem;
          }
        }
      }
    }
    .mint-button {
      width: 170/37.5rem;
      height: 68/37.5rem;
      font-size: 28/37.5rem;
      margin-top: 57/37.5rem;
      margin-bottom: 32/37.5rem;
    }
    .hasPayed {
      padding: 21/37.5rem 0 !important;
      text-align: left;
      font-size: 24/37.5rem;
      padding: 0;
      color: #888;
      border-bottom: 0;
      margin-top: 24/37.5rem;
      width: 100%;
      position: relative;
      line-height: 50/37.5rem;
      height: auto;
      .line {
        width: 104%;
        height: 20px/37.5rem;
        background-color: #eee;
        position: absolute;
        top: 0;
        right: -32/37.5rem;
      }
    }
    .total {
      text-align: right;
    }
  }
}

.listInfo {
  line-height: 50/37.5rem;
  color: #888;
  font-size: 26/37.5rem;
  padding: 0 31/37.5rem;
  background-color: #fff;
  margin-top: 26/37.5rem;
  div {
    span:first-child {
      float: left;
    }
    span:last-child {
      float: right;
    }
  }
}

.foot {
  padding: 10/37.5rem 0;
  padding-right: 33/37.5rem;
  margin-top: 26/37.5rem;
  background-color: #fff;
  text-align: right;
  .mint-button {
    width: 170/37.5rem;
    height: 68/37.5rem;
    font-size: 28/37.5rem;
  }
}

.mint-popup-bottom {
  width: 100%;
  .popheader {
    height: 110/37.5rem;
    line-height: 110/37.5rem;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    font-size: 32/37.5rem;
    color: #da1a1e;
  }
  .popbody {
    text-align: left;
    padding: 0 32/37.5rem;
    padding-bottom: 61/37.5rem;
    h4 {
      font-size: 30/37.5rem;
      color: #333;
      font-weight: 400;
      margin-top: 35/37.5rem;
    }
    > div {
      margin-top: 32/37.5rem;

      font-size: 28/37.5rem;
      color: #555;
    }
    i {
      display: inline-block;
      width: 70/37.5rem;
      height: 70/37.5rem;
    }
    input {
      /* width:30/37.5rem;
        height: 30/37.5rem; */
    }
    .wx {
      position: relative;
      i:first-child {
        background: url(../../../assets/images/index/weiixn.png) no-repeat;
        background-size: contain;
        vertical-align: middle;
      }
      i:last-child {
        width: 30/37.5rem;
        height: 30/37.5rem;
        background: url(../../../assets/images/index/xuanzhong@2x.png) no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        margin-top: -15/37.5rem;
        right: 0;
      }
      span {
        margin-left: 32/37.5rem;
      }
    }
    .zfb {
      i:first-child {
        background: url(../../../assets/images/index/zhifubao.png) no-repeat;
        background-size: contain;
      }
    }
  }
  .popfoot {
    height: 110/37.5rem;
    line-height: 110/37.5rem;
    font-size: 32/37.5rem;
    color: #fff;
    background-color: #da1a1e;
  }
}
</style>